<template>
	<view>
		<view class="cu-bar fixed" :style="'height:'+navHeight+'px;padding-top:'+statusHeight+'px;'">
			<view @tap="closeAction" class="padding-left flex align-center justify-start">
				<text class="cuIcon cuIcon-back text-white"></text>
				<text class="text-white text-lg">返回</text>
			</view>
		</view>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper v-if="dataList.length>0" class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="0"
						:circular="true" :vertical="true">
						<swiper-item v-for="(item,index) in dataList" :key="item.post_id">
							<view class="swiper-item uni-bg-red">
								<video loop="true" class="video" :id="'id'+index"
									:enable-play-gesture="true" :enable-progress-gesture="true" :controls="false"
									:src="item.link" :show-center-play-btn="false">
								</video>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

		</view>
		<view v-if="is_active && post">
			<view class="left">
				<cover-view class="left_box">
					<cover-view @click.stop="jumpToMyMall"
						v-if="post.mall_goods !== null && post.mall_type==1"
						class="ke">
						<cover-image src="../../../static/images/video/4.png"></cover-image>
						<cover-view>{{post.mall_goods.name}} </cover-view>
					</cover-view>
					<cover-view class="ren">{{post.author.nickname}}</cover-view>
					<cover-view class="ke_context">{{post.title}}</cover-view>
					<cover-view class="auto">
						<cover-view @tap="jumpToPostDetail" class="read_more">
							<cover-view class="title">阅读更多 ></cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</view>
			<view class="right">
				<cover-view class="right_box  ">
					<cover-view @tap="jumpToProfile" class="top1">
						<cover-image class="avatar_img" :src="post.author.avatar" mode="">
						</cover-image>
						<cover-image class="add_img" src="../../../static/images/video/1.png" mode=""></cover-image>
					</cover-view>
					<cover-view @tap="favoriteAction" class="top2">
						<cover-image class="t_img" :src="favoriteIcon" mode=""></cover-image>
						<cover-view class="font_t">{{post.favorite_count}}</cover-view>
					</cover-view>
					<cover-view @tap="showModal" class="top2">
						<cover-image class="t_img" src="../../../static/images/video/8.png" mode=""></cover-image>
						<cover-view class="font_t">{{post.comment_count}}</cover-view>
					</cover-view>
					<cover-view @tap="praisePostAction" class="top2">
						<cover-image class="t_img" src="../../../static/images/setting/praise.png" mode="">
						</cover-image>
						<cover-view class="font_t">{{post.praise_count}}</cover-view>
					</cover-view>
				</cover-view>
			</view>
		</view>
		<!--底部抽屉-->
		<tui-bottom-popup :show="bottomPopup" :radius="true" @close="hideModal" style="z-index: 999;">
			<view class="region-box" style="z-index: 999;">
				<mescroll-uni style="width: 100%;height: 87%;" :fixed="false" ref="mescrollRef" @init="mescrollInit"
					@down="downCallback" @up="upCallback" :up="upOption">
					<!-- 热门评论部分 -->
					<view v-if="post&&post.content&&hotList.length>0">
						<tui-sticky stickyHeight="104rpx" container>
							<template v-slot:header>
								<view class="padding-left padding-top-sm padding-bottom-sm">
									<text class="cuIcon-hot text-red padding-right-xs"></text>
									<text class="text-df text-grey">热门评论 ({{hotList.length}})</text>
								</view>
							</template>
							<template v-slot:content style="width: 100%;">
								<view v-for="(comment,index) in hotList" :key="index" class="bg-white"
									style="width: 100%;">
									<comment-item @lock="commentLockAction(comment,index,true)"
										@detailParent=jumpCommentDetail(comment.parent_comment) :comment="comment"
										@detail="jumpCommentDetail(comment)" @report="reportCommentAction(comment)"
										@reply="replyCommentAction(comment)" @praise="praiseAction(comment,index)">
									</comment-item>
								</view>
							</template>
						</tui-sticky>
					</view>
					<!-- 全部评论部分 -->
					<view v-if="post&&post.content">
						<tui-sticky stickyHeight="104rpx" container>
							<template v-slot:header>
								<view class="flex justify-between align-center padding-right">
									<view class="padding-left padding-top-sm padding-bottom-sm">
										<text class="cuIcon-comment text-grey padding-right-xs"></text>
										<text class="text-df text-grey">全部评论 ({{post.comment_count}})</text>
									</view>
									<view class="action" @tap="sortMenu.showActionSheet=true">
										<text class="cuIcon-sort"></text>
										<text class="text-gray text-sm">{{sortTypeLabel}}</text>
									</view>
								</view>
							</template>
							<template v-slot:content style="width: 100%;">
								<view v-for="(comment,index) in commentList" :key="index" class="bg-white"
									style="width: 100%;">
									<comment-item @lock="commentLockAction(comment,index,false)"
										@detailParent=jumpCommentDetail(comment.parent_comment) :comment="comment"
										@detail="jumpCommentDetail(comment)" @report="reportCommentAction(comment)"
										@reply="replyCommentAction(comment)" @praise="praiseAction(comment,index)">
									</comment-item>
								</view>
							</template>
						</tui-sticky>
					</view>
				</mescroll-uni>
				<view class="bg-white solid-top" style="width: 100%;height: 13%;">
					<view class="flex justify-between align-center" style="width: 100%;height: 100%;">
						<view class="padding-left flex align-center justify-start padding-right"
							style="width: 70%;height: 100%;">
							<input @tap="commentAction" :disabled="true" placeholder="说说你的看法"
								style="width: 100%;height: 60%;" class="padding-left-sm bg-gray radius"></input>
						</view>
						<view class="flex justify-end align-center padding-right" style="width: 30%;height: 100%;">
							<button @tap="favoriteAction"
								:class="'lg cuIcon-favorfill '+[post.is_favorite==1?'text-orange':'text-grey']"></button>
							<view style="width: 20upx;"></view>
							<button @tap="praisePostAction" class="lg cuIcon-appreciatefill text-red"></button>
						</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<view class="cu-modal" :class="modalStatus">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{isReportMode?'举报':'回复'}}{{isReportPost?'帖子':'评论'}}</view>
					<view class="action" @tap="modalStatus=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl flex justify-start" style="flex-direction: column;">
					<view v-if="isReportPost==false">
						<view class="flex justify-start align-center padding-bottom">
							<text class="text-grey text-sm">#{{form.replyUser}} : {{form.replyCommentContent}}</text>
						</view>
					</view>
					<view class="flex justify-center align-center padding-bottom-lg" style="width: 100%;">
						<textarea v-if="modalStatus.length > 0"
							class="bg-white radius padding-top padding-left text-left" v-model="form.textInput"
							placeholder="请输入内容"></textarea>
					</view>
					<view class="action flex justify-center padding bg-white" style="width: 100%;">
						<button @tap="commitOperate" class="cu-btn round bg-blue" style="width: 90%;">提交</button>
					</view>
				</view>
			</view>
		</view>
		<tui-actionsheet :show="sortMenu.showActionSheet" :tips="sortMenu.tips" :item-list="sortMenu.itemList"
			:mask-closable="sortMenu.maskClosable" :color="sortMenu.color" :size="sortMenu.size"
			:is-cancel="sortMenu.isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
	import CommentItem from '@/components/comment-item.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getTimeDistance,
		getTagColorForRole
	} from '@/api/utils.js'
	import {
		getVideoPostList,
		postCommentList,
		favoritePost,
		reportPost,
		reportComment,
		replyComment,
		praiseComment,
		postMarkRead,
		increaseForward,
		praise
	} from '@/api/api.js'
	import {
		markRead
	} from '@/api/statusCache.js'
	import {
		isLogin,
		getToken,
		getReportTipReadStatus,
		setReportTipFinishRead,
		getUserInfo
	} from '@/api/auth.js'
	import {
		checkLogin
	} from '@/js_sdk/checkLogin.js'
	import config from '@/api/config.js'
	export default {
		components: {
			CommentItem
		},
		mixins: [MescrollMixin],
		data() {
			return {
				is_active: false,
				finishPraise: {

				},
				type: 1,
				dataList: [],
				currentIndex:0,
				lastIndex:0,
				pageIndex: 0,
				pageSize: 10,
				noMore: false,
				bottomPopup: false,
				sortMenu: {
					sortType: 1,
					showActionSheet: false,
					maskClosable: true,
					itemList: [{
						text: "最新发表",
						color: "#2B2B2B"
					}, {
						text: "最多回复",
						color: "#2B2B2B"
					}, {
						text: "最多点赞",
						color: "#2B2B2B"
					}, {
						text: "只看楼主",
						color: "#2B2B2B"
					}, {
						text: "最早发表",
						color: "#2B2B2B"
					}],
					color: "#9a9a9a",
					size: 26,
					isCancel: true
				},
				modalStatus: '',
				isReportMode: false,
				isReportPost: false,
				form: {
					replyUser: '',
					replyCommentContent: '',
					replyCommentId: null,
					textInput: '',
				},
				hotList: [],
				commentList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '还没有评论，快来抢占沙发吧!'
					}
				},
				requestStatus: {
					isPraising: false,
					isFavoriting: false,
					isMarkingRead: false,
					isVoting: false
				},
			}
		},
		computed: {
			favoriteIcon() {
				if (this.post == null) {
					return '../../../static/images/video/favorite_not.png'
				}
				if (this.post.is_favorite == 1) {
					return '../../../static/images/video/favorite_yes.png'
				} else {
					return '../../../static/images/video/favorite_not.png'
				}
			},
			navHeight() {
				return this.CustomBar
			},
			statusHeight() {
				return this.StatusBar
			},
			post() {
				if (this.dataList.length == 0) {
					return null
				}
				return this.dataList[this.currentIndex]
			},
			canShare() {
				if (this.post == null) {
					return false
				}
				if (this.post.audit_status !== 1) {
					return false
				}
				return true
			},
			auditStatus() {
				if (this.post == null || this.post.auditStatus == 1) {
					return
				}
				let map = {
					'-1': {
						'color': 'red',
						'name': '未通过'
					},
					'0': {
						'color': 'cyan',
						'name': '审核中'
					}
				}
				return map[this.post.audit_status]
			},
			sortTypeLabel() {
				let map = {
					1: '最新发表',
					2: '最多回复',
					3: '最多点赞',
					4: '只看楼主',
					5: '最早发表'
				}
				return map[this.sortMenu.sortType]
			}
		},
		methods: {
			jumpToProfile() {
				if (this.post == null) {
					return
				}
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + this.post.owner_id
				})
			},
			closeAction() {
				uni.navigateBack({
					delta: 1
				})
			},
			jumpToPostDetail() {
				if (this.post == null) {
					return
				}
				uni.navigateTo({
					url: '/pages/detail/detail?postId=' + this.post.post_id
				})
			},
			praisePostAction() {
				if (this.post == null) {
					return
				}
				if (this.finishPraise[this.post.post_id] == true) {
					uni.showToast({
						icon: 'none',
						title: '您已经点赞过这个帖子了!'
					})
					return
				}
				praise(this.post.post_id).then(res => {
					console.log('点赞数增长成功');
					uni.showToast({
						title: '帖子点赞成功!'
					})
					this.dataList[this.currentIndex].praise_count++
					this.finishPraise[this.post.post_id] = true
				}).catch(error => {
					console.log('点赞数增长失败');
				})
			},
			onShareAppMessage(res) {
				if (!this.canShare) {
					return {
						title: '帖子内容未获取或未通过审核,暂不可分享',
						path: '/pages/detail/detail?postId=0&outside=1'
					}
				}
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				increaseForward(this.post.post_id).then(res => {
					console.log('转发数增长成功');
				}).catch(error => {
					console.log('转发数增长失败');
				})
				return {
					title: this.post.title,
					path: '/pages/detail/detail?postId=' + this.post.post_id + '&outside=1'
				}
			},
			onShareTimeline(res) {
				if (!this.canShare) {
					return {
						title: '帖子内容未获取或未通过审核,暂不可分享',
						path: '/pages/detail/detail?postId=0&outside=1'
					}
				}
				increaseForward(this.post.post_id).then(res => {
					console.log('转发数增长成功');
				}).catch(error => {
					console.log('转发数增长失败');
				})
				return {
					title: this.post.title,
					path: '/pages/detail/detail?postId=' + this.post.post_id + '&outside=1'
				}
			},
			favoriteAction() {
				if (this.post == null) {
					return
				}
				if (isLogin() == false) {
					checkLogin()
					return
				}
				if (this.requestStatus.isFavoriting) {
					return
				}
				this.requestStatus.isFavoriting = true
				uni.showLoading({
					title: '正在提交...'
				})
				favoritePost(this.post.post_id).then(res => {
					this.requestStatus.isFavoriting = false
					uni.hideLoading()
					if (this.post.is_favorite) {
						this.post.favorite_count -= 1
						this.post.is_favorite = 0
						uni.showToast({
							icon: 'none',
							title: '已取消收藏'
						})
					} else {
						this.post.favorite_count += 1
						this.post.is_favorite = 1
						uni.showToast({
							title: '收藏成功'
						})
					}
				}).catch(error => {
					this.requestStatus.isFavoriting = false
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '收藏失败!'
					})
				})
			},
			commitOperate() {
				if (this.post == null) {
					return
				}
				if (isLogin() == false) {
					checkLogin()
					return
				}
				this.modalStatus = null
				uni.showLoading({
					title: '正在提交...'
				})
				if (this.isReportMode) {
					if (this.isReportPost) {
						reportPost(this.postId, this.form.textInput).then(res => {
							uni.hideLoading()
							uni.showToast({
								title: '举报成功'
							})
						}).catch(error => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '提交失败'
							})
						})
					} else {
						reportComment(this.form.replyCommentId, this.form.textInput).then(res => {
							uni.hideLoading()
							uni.showToast({
								title: '举报成功'
							})
						}).catch(error => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '提交失败'
							})
						})
					}
				} else {
					replyComment(this.form.replyCommentId, this.form.textInput).then(res => {
						uni.hideLoading()
						uni.showToast({
							title: '回复成功'
						})
						this.dataList.unshift(res.data)
					}).catch(error => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '提交失败'
						})
					})
				}
			},
			praiseAction(comment, index) {
				if (this.post == null) {
					return
				}
				if (isLogin() == false) {
					checkLogin()
					return
				}
				if (this.requestStatus.isPraising) {
					return
				}
				this.requestStatus.isPraising = true
				praiseComment(comment.comment_id).then(res => {
					if (comment.is_praise == 0) {
						if (comment.is_hot) {
							this.hotList[index].is_praise = 1
							this.hotList[index].praise_count += 1
						} else {
							this.commentList[index].is_praise = 1
							this.commentList[index].praise_count += 1
						}
						uni.showToast({
							title: '点赞成功'
						})
						this.requestStatus.isPraising = false
					} else {
						if (comment.is_hot) {
							this.hotList[index].is_praise = 0
							this.hotList[index].praise_count -= 1
						} else {
							this.commentList[index].is_praise = 0
							this.commentList[index].praise_count -= 1
						}
						uni.showToast({
							icon: 'none',
							title: '已取消点赞'
						})
						this.requestStatus.isPraising = false
					}
				}).catch(error => {
					console.log(error)
					uni.showToast({
						icon: 'none',
						title: '提交失败'
					})
					this.requestStatus.isPraising = false
				})
			},
			closeActionSheet: function() {
				this.sortMenu.showActionSheet = false
			},
			itemClick: function(e) {
				this.sortMenu.sortType = e.index + 1;
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
				this.closeActionSheet();
			},
			jumpProfileAction() {
				uni.navigateTo({
					url: '/pages/profile/profile'
				})
			},
			jumpCommentDetail(comment) {
				uni.navigateTo({
					url: '/pages/always/comment-detail/comment-detail?commentId=' + comment.comment_id
				})
			},
			commentAction() {
				if (this.post == null) {
					return
				}
				if (isLogin() == false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/comment/comment?postId=' + this.post.post_id
				})
			},
			replyCommentAction(comment) {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				uni.navigateTo({
					url: '/pages/comment/comment?postId=' + comment.post_id,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('replyComment', comment)
					}
				})
			},
			reportCommentAction(comment) {
				if (isLogin() == false) {
					checkLogin()
					return
				}
				this.form.replyCommentId = comment.comment_id
				this.form.replyUser = comment.author.nickname
				this.form.replyCommentContent = comment.content
				this.isReportPost = false
				this.isReportMode = true
				this.modalStatus = 'show'
			},
			reportPostAction() {
				if (this.post == null) {
					return
				}
				if (isLogin() == false) {
					checkLogin()
					return
				}
				let status = getReportTipReadStatus()
				if (status === false) {
					let that = this
					uni.showModal({
						title: '平台提示',
						content: '请如实根据当前需举报内容的真实性进行举报，如果多次举报被判定无效举报或者恶意举报将会被平台永久拉黑!',
						confirmText: '知道了',
						cancelText: '手滑了',
						success(res) {
							if (res.confirm) {
								that.isReportPost = true
								that.isReportMode = true
								that.modalStatus = 'show'
							}
						},
						complete() {
							setReportTipFinishRead()
						}
					})
				} else {
					this.isReportPost = true
					this.isReportMode = true
					this.modalStatus = 'show'
				}
			},
			getDataList(pageIndex, pageSize) {
				if (this.post == null) {
					if (this.mescroll) {
						this.mescroll.endSuccess(0, true);
					}
					return
				}
				postCommentList(this.post.post_id, pageIndex, pageSize, this.sortMenu.sortType).then(res => {
					if (pageIndex == 0) {
						res.data.hot_list.forEach(item => {
							item.show_time = getTimeDistance(item.created_at)
						})
					}
					let pageList = res.data.list
					pageList.forEach(item => {
						item.show_time = getTimeDistance(item.created_at)
					})
					if (pageIndex == 0) {
						this.hotList = res.data.hot_list
					}
					if (pageIndex == 0) {
						this.commentList = pageList
					} else {
						this.commentList = this.commentList.concat(pageList)
					}
					this.post.comment_count = res.data.total
					let hasNext = pageList.length >= pageSize
					if (this.mescroll) {
						this.mescroll.endSuccess(this.commentList.length, hasNext);
					}
				}).catch(error => {
					if (this.mescroll) {
						this.mescroll.endErr()
					}
				})
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.getDataList(pageIndex, page.size)
			},
			ViewImage(e) {
				console.log(e.currentTarget.dataset.list)
				console.log(e.currentTarget.dataset.url)
				let fixList = []
				e.currentTarget.dataset.list.forEach(item => {
					fixList.push(item + '?imageView2/0/q/75' + this.waterMark)
				})
				uni.previewImage({
					urls: fixList,
					current: e.currentTarget.dataset.url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			showModal: function() {
				this.is_active = false
				this.bottomPopup = true;
				let videoContext = uni.createVideoContext('id'+this.currentIndex)
				videoContext.pause()
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			hideModal: function() {
				this.is_active = true
				this.bottomPopup = false;
				let videoContext = uni.createVideoContext('id'+this.currentIndex)
				videoContext.play()
			},
			jumpToMyMall() {
				uni.navigateTo({
					url: '/pages/always/create-order/create-order?shopId=1'
				})
			},
			getPostList() {
				if (this.noMore) {
					return
				}
				getVideoPostList(this.type, this.pageIndex, this.pageSize).then(res => {
					//解码商品信息
					res.data.list.forEach(item => {
						if (item.mall_goods !== null && item.mall_goods !== undefined) {
							item.mall_goods = JSON.parse(item.mall_goods)
						}
					})
					if (res.data.list.length < this.pageSize) {
						this.noMore = true
					}
					if (res.data.list.length == 0) {
						this.noMore = true
						return
					}
					if (this.pageIndex == 0) {
						this.dataList = res.data.list
					} else {
						this.dataList = this.dataList.concat(res.data.list)
					}
					//找到中间这个postId	
					if(this.pageIndex == 0) {
						this.currentIndex = 0
						this.$nextTick(function() {
							let videoContext = uni.createVideoContext('id'+this.currentIndex)
							videoContext.play()
							this.is_active = true
						})
					}
				}).catch(error => {
					uni.showToast({
						icon: 'none',
						title: '获取视频信息失败'
					})
				})
			},
			changefun(e) {
				this.is_active = false
				if(this.dataList.length > 4) {
					if(this.currentIndex == this.dataList.length - 3 && this.dataList.length > 0) {
						this.pageIndex++
						this.getPostList()
					}
				}else{
					if(this.currentIndex == this.dataList.length - 1 && this.dataList.length > 0) {
						this.pageIndex++
						this.getPostList()
					}
				}	
			},
			animationfinishfun(e) {
				this.lastIndex = this.currentIndex
				this.currentIndex = e.detail.current
				this.$nextTick(function() {
					let videoContext = uni.createVideoContext('id'+this.lastIndex)
					videoContext.pause()
					let currentVideo = uni.createVideoContext('id'+this.currentIndex)
					currentVideo.play()
					this.is_active = true
				})
			}
		},
		onLoad(options) {
			if (options.type !== null && options.type !== undefined) {
				this.type = options.type
			}
			this.getPostList()
		}
	}
</script>

<style scoped lang="less">
	.close_btn {
		width: 63upx;
		height: 63upx;
		top: 67upx;
		left: 66upx;
		position: fixed;
		z-index: 99;
		color: #FFFFFF;
	}


	.circle {

		background: rgba(34, 34, 34, 0.4);

		border-radius: 50%;
		z-index: 2;
		height: 70px;
		width: 70px;
		position: fixed;
		top: 0;

		bottom: 441rpx;
		left: 31rpx;

		margin: auto;

		.red {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: 3;
			height: 35px;
			width: 35px;
		}
	}

	.swiper {
		height: 100vh;

		.swiper-item {
			height: 100vh;
			position: relative;
		}

		.uni-bg-red {
			background: red;
		}

		.uni-bg-green {
			background: green;
		}

		.uni-bg-blue {
			background: blue;
		}
	}

	.video {
		width: 100%;
		height: 100vh;
		position: relative;

	}

	.left_box {
		position: fixed;
		bottom: 60rpx;
		left: 24rpx;

		.ke_context {

			width: 516rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			word-break: break-all;
			word-wrap: break-word;
			white-space: pre-line;
			white-space: normal;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		}

		.ren {

			margin: 20rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
		}

		.auto {
			display: flex;
			align-items: center;
			width: 310rpx;
			height: 60rpx;
			margin-top: 24rpx;
			opacity: 1;
			border-radius: 8rpx;
			padding-left: 10rpx;

			cover-view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 90px;
				text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
			}

			.read_more {
				background-color: #8799a3;
				border-radius: 10rpx;

				.title {
					border-radius: 10rpx;
					padding: 0px 10rpx;
					color: #FFFFFF;
					font-size: 15rpx;
					font-family: PingFang SC;
					font-weight: 200;
				}
			}

			cover-image {
				margin-right: 10rpx;
				height: 28rpx;
				width: 26rpx;
			}
		}

		.ke {
			display: flex;
			align-items: center;
			width: 310rpx;
			height: 60rpx;
			background: rgba(0, 0, 0, 0.3);
			opacity: 1;
			border-radius: 8rpx;
			padding-left: 10rpx;

			cover-view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 90px;
				text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
			}

			cover-image {
				margin-right: 10rpx;
				height: 40rpx;
				width: 40rpx;
			}
		}
	}

	.H_T {
		z-index: 2;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		position: absolute;
		padding: 0 30rpx;
		background: transparent;
		justify-content: space-between;

		.back {
			height: 48rpx;
			width: 48rpx;
		}

		.search {
			height: 48rpx;
			width: 48rpx;
		}
	}

	.right_box {
		width: 100rpx;


		position: absolute;
		z-index: 2;
		bottom: 60rpx;
		right: 12rpx;
		display: flex;
		flex-direction: column;

		.top1 {
			position: relative;
			height: 124rpx;

			.avatar_img {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}

			.add_img {
				position: absolute;
				z-index: 99;
				width: 48rpx;
				height: 48rpx;
				bottom: 10rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}

		.top2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 37rpx;

			.t_img {
				height: 72rpx;
				width: 72rpx;
				margin-bottom: 10rpx;
			}

			.font_t {
				font-size: 26rpx;
				font-family: SF Pro Text;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);

				text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);
				text-align: center;
			}
		}

	}

	/*底部抽屉样式 start*/

	.region-box {
		width: 100%;
		height: 888rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}

	.region-txt {
		width: 96rpx;
		height: 82rpx;
		background: #e9edfc;
		line-height: 82rpx;
		border-radius: 6rpx;
		font-size: 30rpx;
		color: #333;
		text-align: center;
		margin-right: 23rpx;
		margin-bottom: 24rpx;
		flex-grow: 1;
	}

	.region-txt:nth-of-type(6n) {
		margin-right: 0;
	}

	.grow {
		flex-grow: 0;
	}

	.active {
		background: #5677fc;
		color: #fff;
	}

	/*底部抽屉样式 end*/
</style>
